<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import { emitter } from './eventBus.js'

const num = ref(0)

const handler = (val) => {
  console.log(val)
  num.value = val
}

onMounted(() => {
  emitter.on('share-number', handler)
})

onBeforeUnmount(() => {
  emitter.off('share-number', handler)
})
</script>

<template>
  <div class="box-right">
    <h5>数据接收方 --- {{ num }}</h5>
    <hr />
  </div>
</template>

<style scoped>
h5 {
  margin: 0;
  padding: 0;
}
.box-right {
  background-color: lightblue;
  padding: 15px;
  box-sizing: border-box;
  min-height: 200px;
  flex: 1;
}
</style>
